<template>
	<view>
		<van-tabs
			animated
			sticky
			color="#4177f6"
			:active="active"
			@change="tabChange"
		>
			<van-tab title="我的社团" name="approved">
				<view  class="tab">
					<template v-for="item in approvedClub" :key="item.id">
						<navigator :url="`/pages/club-detail/club-detail?club_id=${item.id}`">
							<ClubItemV3 :club="item"/>
						</navigator>
					</template>
					<!-- <view class="loading" v-if="approvedClub.length === 0">暂无社团～～</view> -->
						<van-empty description="暂无社团" v-if="approvedClub.length === 0" />
				</view>
			
				
			</van-tab>
			<van-tab title="我的申请"  name="pending">
				<view class="tab">
					<template v-for="item in notApprovedClub" :key="item.id">
						<view @longpress="handleRemove(item.id)">
							<ClubItemV3 :club="item"/>
						</view>
					</template>
					<!-- <view class="loading" v-if="notApprovedClub.length === 0">暂无申请～～</view> -->
						<van-empty description="暂无申请" v-if="notApprovedClub.length === 0" />
				</view>
			</van-tab>
		</van-tabs>
		<!-- 删除 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				type="error"
				cancelText="取消"
				confirmText="确定"
				title="提示"
				content="确定删除这个申请吗"
				@confirm="dialogConfirm"
			></uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script setup>
import { ref,onMounted, computed } from 'vue'
import { storeToRefs } from 'pinia'

import useLoginStore from '@/store/login.js'
import useClubStore from '@/store/club.js'
import ClubItemV3 from '@/components/club-item-v3/club-item-v3.vue'

const active = ref('approved')

const loginStore = useLoginStore()
const clubStore = useClubStore()

const { userInfo } = storeToRefs(loginStore)
const { joinedClubs } = storeToRefs(clubStore)
onMounted(() => {
	clubStore.getClubByUserIdAction()
})

const approvedClub = computed(() => {
	return joinedClubs.value.filter(item => item.status === 'approved')
})
const notApprovedClub = computed(() => {
	return joinedClubs.value.filter(item => item.status != 'approved')
})


const alertDialog = ref('')
const clubId = ref('')
function handleRemove(id) {
	clubId.value = id
	alertDialog.value.open()
}

function dialogConfirm() {
	clubStore.deleteClubByIdAction(clubId.value)
}

</script>

<style lang="less">
.tab {
	position: relative;
	min-height: 500rpx;
	min-width: 750rpx;
}
.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(0, 0, 0, 0.6);
}

</style>
